<template>
  <div class="app-container"> 
    <el-form class="query-wrapper" :model="queryParams"> 

      <el-select
        v-model="queryParams.vesselName"
        filterable
        clearable
        placeholder="Vessel"
        @change="selectVessel" 
        style="width:180px"
      >
        <el-option :key="item.vesselName" :label="item.vesselName" :value="item.vesselName" v-for="item in vessels" >
        </el-option>
      </el-select> 
      &nbsp;&nbsp;
      <el-select v-model="queryParams.voyageNo" filterable clearable placeholder="Voyage" @change="selectVoyage(queryParams)"  style="width:110px">
        <el-option :key="item.voyageNo" :label="item.voyageNo?item.voyageNo:''" :value="item.voyageNo?item.voyageNo:''" v-for="item in voyages">
        </el-option>
      </el-select>  
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pol" filterable clearable allow-create placeholder="POL">
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pols">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.pod" filterable clearable allow-create placeholder="POD">
        <el-option :key="item.portName" :label="item.portName" :value="item.portName" v-for="item in pods">
        </el-option>
      </el-select>
      &nbsp;&nbsp;
      <el-select v-model="queryParams.status" filterable clearable placeholder="Status"  style="width:120px">
        <el-option :key="index" :label="item" :value="index" v-for="(item, index) in fullStatus"> </el-option>
      </el-select> 		
      &nbsp;&nbsp; 
      <el-button type="primary" icon="search" @click="search">{{ $t("ship.button.search") }}</el-button>
      <SearchReset :query-params="queryParams" @reset="resetQuery"></SearchReset>
      <span>&nbsp;&nbsp;&nbsp; &nbsp;  </span>
      <el-button type="warning" plain icon="download" :disabled="listData.length == 0" @click="exportClickEvent(1)">
        Print 
    </el-button>   
  <!-- <el-dropdown placement="bottom-start" trigger="click">
    <el-button type="primary" :disabled="listData.length == 0" >
          Print
        </el-button> 
    <template #dropdown>
      <el-dropdown-menu>
          <el-dropdown-item :disabled="listData.length == 0" @click="exportClickEvent(0)">for planner</el-dropdown-item>
          <el-dropdown-item :disabled="listData.length == 0" @click="exportClickEvent(1)">for Cargo List</el-dropdown-item> 
        </el-dropdown-menu>
      </template>
    </el-dropdown>  -->

  </el-form> 
  </div> 
      <el-table
        ref="tableRef"
        stripe
        :data="listData" 
        max-height="700"
        @sort-change="handleSortChange" 
        highlight-current-row
        show-overflow-tooltip 
        v-loading="loading"
        :header-cell-style ="{textAlign:'center'}" 
        :cell-style ="{textAlign:'center'}" 
        :default-sort="defaultSort"
      >
      <!-- <el-table-column prop="unitLength" label="stowage plan" >
        <template #default="scope">
          {{ scope.row.vesselName + scope.row.voyageNo }}
          
        </template>
      </el-table-column> -->
      <el-table-column prop="bookingStatus" label="Status" width="120" > 
          <template #default="scope">{{ fullStatus[scope.row.status] }}</template> 
      </el-table-column>  
      <el-table-column prop="vesselName" label="Vessel" width="150"  sortable="custom" :sort-orders="['descending', 'ascending']"  />
      <el-table-column prop="voyageNo" label="Voyage" width="100"   sortable="custom" :sort-orders="['descending', 'ascending']" />
      <el-table-column prop="blNo" label="B/L No." width="150" sortable="custom"  :sort-orders="['descending', 'ascending']"/>
       <el-table-column prop="payer" label="Freight Payable Party" width="200" sortable="custom"  :sort-orders="['descending', 'ascending']"/>  
      <el-table-column prop="pol" label="POL"   width="100" sortable="custom"   :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="pod" label="POD"   width="100" sortable="custom"  :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="brand" label="Brand"   width="100" sortable="custom"  :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="model" label="Model"   width="140" sortable="custom"  :sort-orders="['descending', 'ascending']" />
        <el-table-column prop="cargoType" label="Cargo Type" width="120" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="cargoDesc" label="Cargo Description" sortable="custom"   width="140"  > 
	       <template #header="scope">
            Cargo <br/>Description
        </template> 
      </el-table-column> 

      <el-table-column prop="totalUnits" label="total units" width="110" sortable="custom" :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="unitLength" label="Length(m)" width="100"  >
        <template #default="scope">
            <span :class="scope.row.flag?'diff-measure':''">{{ scope.row.unitLength }}</span> 
          </template>
      </el-table-column>
      <el-table-column prop="unitWidth" label="Width(m)"   width="100" > 
        <template #default="scope">
            <span :class="scope.row.flag?'diff-measure':''">{{ scope.row.unitWidth }}</span> 
          </template>
      </el-table-column>
      <el-table-column prop="unitHeight" label="Width(m)"  width="100" > 
        <template #default="scope">
            <span :class="scope.row.flag?'diff-measure':''">{{ scope.row.unitHeight }}</span> 
          </template>
      </el-table-column>
      <el-table-column prop="unitCbm" label="Unit CBM"    width="100" >
        <template #default="scope">
            <span :class="scope.row.flag?'diff-measure':''">{{ scope.row.unitCbm }}</span> 
          </template>
      </el-table-column>
      <el-table-column prop="totalVolume" label="Total CBM" width="100" />
      <el-table-column prop="photo" label="Photo"   width="120" header-align="center">
        <template #default="scope" > 
          <a v-for="item in scope.photos" :key="item" href="javascript:void(0)" @click="downloadPDF(item)">{{ getFileName(item) }}</a>
        </template>
        </el-table-column>
      <el-table-column prop="unitWeight" label="" width="170">
        <template #header>
          <span>Unit Weight({{ unitWeightFilter.unitWeight.text }})</span>
          <el-select
            ref="unitWeight"
            v-model="unitWeightFilter.unitWeight"
            class="el-select_dropMenu"
            placeholder="choose"
            value-key="value"
            @change="item => { handleUnitWeightChange(item, 'unitWeight') }"
            @mouseenter="toggleUnitWeightMenu('unitWeight')"
          >
            <el-option :key="item.value" :label="item.text" :value="item" v-for="item in unitWeightFilterOptions" />
          </el-select>
        </template>
        <template #default="{ row: { unitWeight } }">
          <span>{{ unitWeight ? (unitWeight / unitWeightFilter.unitWeight.value) : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="totalWeight" label="" width="200">
        <template #header>
          <span>Total Weight({{ unitWeightFilter.totalWeight.text }})</span>
          <el-select
            ref="totalWeight"
            v-model="unitWeightFilter.totalWeight"
            class="el-select_dropMenu"
            placeholder="choose"
            value-key="value"
            @change="item => { handleUnitWeightChange(item, 'totalWeight') }"
            @mouseenter="toggleUnitWeightMenu('totalWeight')"
          >
            <el-option :key="item.value" :label="item.text" :value="item" v-for="item in unitWeightFilterOptions" />
          </el-select>
        </template>
        <template #default="{ row: { totalWeight } }">
          <span>{{ totalWeight ? (totalWeight / unitWeightFilter.totalWeight.value) : '' }}</span>
        </template>
      </el-table-column>
       <el-table-column prop="carType" :label="'New Vehicle/' + '\n' + 'Used Vehicle'" width="120"  >
	       <template #header="scope">
            New Vehicle<br/>Used Vehicle 
        </template> 
      </el-table-column>
	  
      <el-table-column prop="fuelType" label="Fuel Type"   width="120"  :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="lashingHookFront" :label= "'Lashing Hook'+ '\n' + '  (FRONT)'" width="140"  >
	     <template #header="scope">
            Lashing Hook<br/> (FRONT)  
        </template> 
        <template #default="scope">
            {{lashHookStatus[scope.row.lashingHookFront] }}
        </template> 
      </el-table-column>
      <el-table-column prop="lashingHookRear" :label="'Lashing Hook'+ '\n' + '  (REAR)'" width="140"  >
	    <template #header="scope">
           Lashing Hook<br/>  (REAR)
        </template> 
        <template #default="scope">
            {{lashHookStatus[scope.row.lashingHookRear] }}
        </template> 
      </el-table-column> 
      <el-table-column prop="spareLocation" :label="'Spare Parts Location' + '\n' + '（Inside Vehicle / On Deck）'" width="220" align="center"> 
	    <template #header="scope">
           Spare Parts Location <br/> （Inside Vehicle / On Deck）  <br/> 
        </template> 
	   </el-table-column>
      <el-table-column prop="weight1" label="L+"    width="100" />
      <el-table-column prop="weight2" label="W+"    width="100" />

      <el-table-column prop="shipper" label="Shipper" width="400" sortable="custom"  :sort-orders="['descending', 'ascending']"/>
      <el-table-column prop="remark" label="Remarks" width="120" />
      <!-- <el-table-column prop="blNo" label="B/L No." fixed="right" width="150" header-align="center"/> -->
        <!-- <el-table-column prop="bookingNo" label="Booking No" width="120" />
        <el-table-column prop="channel" label="Booking Channel" width="200"/>
        <el-table-column prop="terminal" label="Terminal Ground" width="200"/>
        <el-table-column prop="partner" label="Party to pay freight" width="200"/>
        <el-table-column prop="shipper" label="Shipper" />
        <el-table-column prop="notifyParty" label=" Notify Party" />
        <el-table-column prop="pol" label="POL" />
        <el-table-column prop="pod" label="POD" />
        <el-table-column prop="brand" label="Brand" />
        <el-table-column prop="model" label="Model" />
        <el-table-column prop="cargoDesc" label="Cargo Description" width="200" /> -->
       <!-- <el-table-column label="Operation" fixed="right" width="90">
          <template #default="scope">
            <span class="btn-primary" v-if="scope.row.status <3" @click="editClickEvent(scope.row)">{{
              $t("ship.button.edit")
            }}</span
            >&nbsp;&nbsp;
            
          </template>
        </el-table-column> -->
      </el-table>
    <!-- </div>
  </div> -->

  <pagination
    v-show="total > 0"
    :total="total"
    :page="queryParams.pageNum"
    :limit="queryParams.pageSize"
    @pagination="pageQuery"
    style="float: right"
  />


  <el-dialog
    destroy-on-close
    draggable
    :width="1000"
    :title="dialogTitle"
    v-model="dialogFormVisible"
  >
    <el-form :model="formParam" :rules="rules" ref="custForm"> 
      <el-row>
        <el-col :span="8">
          <el-form-item label="Length(m)" label-width="120px" prop="unitLength" required>
            <el-input-number v-model="formParam.unitLength" :precsion="3" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Width(m)" label-width="120px" prop="unitWidth" required>
            <el-input-number v-model="formParam.unitWidth" :precsion="3" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="Height(m)" label-width="120px" prop="unitHeight" required>
            <el-input-number v-model="formParam.unitHeight" :precsion="3" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="unit cbm" label-width="120px">
            <template #default="scope">
              {{
                (
                  formParam.unitLength *
                  formParam.unitHeight *
                  formParam.unitWidth
                ).toFixed(3)
              }}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="unit weight (kg)"
            label-width="120px"
            prop="unitWeight"
            required
          >
            <el-input type="number" v-model="formParam.unitWeight" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="total units"
            label-width="120px"
            prop="totalUnits"
            required
          >
            <el-input-number v-model="formParam.totalUnits" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="total volume（cbm）" label-width="200px">
            <template #default="scope">
              {{
                (
                  formParam.unitLength *
                  formParam.unitHeight *
                  formParam.unitWidth *
                  formParam.totalUnits
                ).toFixed(2)
              }}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="Total Weight (kg)"
            label-width="200px"
            prop="totalWeight"
            required
          >
            <template #default="scope">
              {{ ((formParam.totalUnits || 0) * (formParam.unitWeight || 0)).toFixed(2) }}
            </template>
            <!-- <el-input-number v-model="formParam.totalWeight" disabled /> -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item
            label="Spare Parts Qty （Pcs)"
            label-width="170px"
            prop="totalVolume"
          >
            <el-input type="number" v-model="formParam.spareQty" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="Spart Parts Location（in cab / on deck）"
            label-width="230px"
            prop="spareLocation"
          >
            <el-input v-model="formParam.spareLocation" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item
            label="Spare Parts volume(cbm)"
            label-width="200px"
            prop="spareVolume"
          >
            <el-input type="number" v-model="formParam.spareVolume" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="Spare Parts Weight(kg)"
            label-width="200px"
            prop="spareLocation"
          >
            <el-input-number v-model="formParam.spareWeight" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="B/L NO. 提单号" label-width="120px" prop="totalVolume">
            <el-input type="number" v-model="formParam.spareVolume" disabled />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="Remarks" label-width="120px" prop="remark">
            <el-input v-model="formParam.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{
          $t("ship.button.cancel")
        }}</el-button>
      
        <el-button type="primary" @click="submitForm">{{
          $t("ship.button.submit")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup name="preLoading">
// @ts-nocheck
import { ref, onMounted, reactive } from "vue";
import service from "@/utils/request";
import { ElNotification, ElMessageBox, ElMessage} from "element-plus";
import { useTableDrag } from '@/hooks/useHooks';
import { downloadFile } from "@/utils/downloadFile";
import {convertUrl} from "@/utils/tencentCos";
import moment from "moment";
let fullStatus = ["draft", "confirmed","waiting list","close"]
const { tableRef, proxy } = useTableDrag();
let vessels = reactive([] as any);
const unitWeight = ref(null)
const totalWeight = ref(null)
const lashHookStatus = [ "No","Yes"];
const unitWeightFilter = ref({ unitWeight: { text: 'kg', value: 1 }, totalWeight: { text: 'kg', value: 1 } });
const unitWeightFilterOptions = reactive([{ text: 'kg', value: 1 }, { text: 'ton', value: 1000 }]);
const handleUnitWeightChange = (item: any, prop: string) => {
  unitWeightFilter.value[prop] = item
}
const toggleUnitWeightMenu = (prop: string) => {
  proxy?.$refs?.[prop]?.toggleMenu()
}

const custForm = ref();
const dialogTitle = ref("");
const initForm = {
  id: null,
  bookingNo: null,
  vesselName: null,
  voyageId: null,
  voyageNo: null,
  carrierName: null,
  channel: null,
  terminal: null,
  payer: null,
  shipper: null,
  consignee: null,
  notifyParty: null,
  pol: null,
  pod: null,
  brand: null,
  model: null,
  cargoDesc: null,
  lashingHookFront: null,
  lashingHookRear: null,
  carType: null,
  fuelType: null,
  unitLength: null,
  unitWidth: null,
  unitHeight: null,
  unitCbm: null,
  unitWeight: null,
  totalUnits: null,
  totalWeight: null,
  totalVolume: null,
  spareQty: null,
  spareLocation: null,
  spareVolume: null,
  spareWeight: null,
  remark: null,
  blNo: null,
  bookings: [] as any,
};

const initForm1 = {
  id: null,
  vesselName: null,
  voyageNo: null,
  carrierName: null,
  vesselId: null,
  bookings: [] as any,
};
const formParam = reactive(Object.assign({}, initForm));
const formParam1 = reactive(Object.assign({}, initForm1));

const total = ref(0);

const rules = ref({ 
}); 

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  vesselName: null,
  voyageNo: null,
  pol: null,
  pod: null, 
  orderByColumn: undefined,
  isAsc: undefined,
});

let carriers = ref([] as any); 
let voyages = ref([] as any);
let pols = reactive([])
let pods = reactive([])
let ports = ref([] as any);
let recordData = ref([] as any);
const listData = ref([]);
const loading = ref(true)
const refreshTable = async () => {
  loading.value = true
  let result = await service.get("/shipping/stowagePlan/getTable", {
    params: queryParams,
  });
  listData.value = result.data; 
  total.value = result.total;
  loading.value = false
};
const resetQuery = (data) => {
  Object.assign(queryParams, data)
  listData.value = []
  total.value = 0
}
const dialogFormVisible = ref(false);

const dialogFormVisible1 = ref(false);
const editClickEvent = (row: any) => {
  dialogTitle.value = "Update Planning";
  dialogFormVisible.value = true;
  Object.keys(initForm).forEach((k) => (formParam[k] = row[k]));
  isAdd = false;
};

let isAdd = false;
 
const resetForm = () => {
  // @ts-ignore
  custForm.value.resetFields();
};

const submitForm = () => {
  // @ts-ignore
  custForm.value.validate(async (valid) => {
    if (!valid) {
      // @ts-ignore
      ElNotification.warning({
        title: "Prompt information",
        message: "verification not success！",
        position: "bottom-right",
      });
      return;
    }

    // 统一处理数据
    if (isAdd) {
      formObj.value.recordData.forEach((item): any => {
        item.bookingNo = vesselCode + item.pol + "24001";
        item.unitCbm = (item.unitLength * item.unitWidth * item.unitHeight).toFixed(2);
        item.totalVolume = (item.unitCbm * item.totalUnits).toFixed(2);
        item.blNo = companyCode + vesselCode + voyageNo + item.pol + "001";
        item.totalWeight = item.totalUnits * item.unitWeight;
      });
      formParam.bookings = formObj.value.recordData;
    } else {
      formParam.bookingNo = vesselCode + formParam.pol + "24001";
      formParam.unitCbm = (
        formParam.unitLength *
        formParam.unitWidth *
        formParam.unitHeight
      ).toFixed(3);
      formParam.totalVolume = (formParam.unitCbm * formParam.totalUnits).toFixed(3);
      formParam.blNo = companyCode + vesselCode + voyageNo + formParam.pol + "001";
      formParam.totalWeight = formParam.totalUnits * formParam.unitWeight;
    }

    await service[isAdd ? "post" : "put"]("shipping/booking", formParam);
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "save successful!",
      position: "bottom-right",
    });
    dialogFormVisible.value = false;
    refreshTable();
  });
};

const pageQuery = async (e) => {
  queryParams.pageNum = e.page;
  queryParams.pageSize = e.limit;
  refreshTable();
};

const search = () => { 
  if(queryParams.voyageNo == null){
    ElMessage.warning("please choose Vessel and Voyage to query!")
    return
  }
  refreshTable();
};

 
const uploadFile = async (event) => {
  if (event.target == null || event.target.files[0] == null) {
    return;
  }
  const formData = new FormData();
  formData.append("file", event.target.files[0]);
  await service["post"]("shipping/booking/uploadFile", formData);
};

const handleSortChange = async (column: any) => {
  queryParams.orderByColumn = column.prop;
  queryParams.isAsc = column.order; //动态取值排序顺序
  refreshTable();
};

const exportClickEvent = (index)=>{ 
  downloadFile("/shipping/stowagePlan/exportCargoList", queryParams, `${queryParams.vesselName}_${queryParams.voyageNo}_STOWAGE CARGO LIST_${moment( new Date()).format('YYYYMMDD')}.xlsx`); 
}
const handleSubmit = async () => {
  if (listData.value.length <= 0) {
    ElNotification.warning({
      title: "Prompt information",
      message: "no data to submit！",
      position: "bottom-right",
    });
    return;
  }

  ElMessageBox.confirm(
    "Confirm to send the declare information to approve？",
    "Confirmation Information",
    {
      type: "warning",
    }
  ).then(async () => {
    let params = { bookings: listData.value };
    await service.post(`shipping/booking/submit`, params);
    ElNotification.success({
      title: "Prompt information",
      message: "submit the data success!",
      position: "bottom-right",
    });
    //await service.delete(`shipping/booking/${id}`);
  });
};

const removeClickEvent = (id) => {
  ElMessageBox.confirm("Confirm to delete the data？", "Confirmation Information", {
    type: "warning",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
  }).then(async () => {
    await service.delete(`shipping/booking/${id}`);
    refreshTable();
    // @ts-ignore
    ElNotification.success({
      title: "Prompt information",
      message: "Delete successfully!",
      position: "bottom-right",
    });
  });
};
 
let formObj = ref({
  recordData: [
    {
      id: 1,
      channel: "",
      terminal: "",
      payer: "",
      shipper: "",
      consignee: "",
      notifyParty: "",
      pol: "",
      pod: "",
      brand: "",
      model: "",
      cargoDesc: "",
      unitLength: null,
      unitWidth: null,
      unitHeight: null,
      unitCbm: null,
      unitWeight: null,
      totalUnits: null,
      totalVolume: null,
      totalWeight: null,
      spareQty: null,
      spareLocation: null,
      spareVolume: null,
      spareWeight: null,
      blNo: "",
    } as any,
  ],
});
 
let companyCode = "";
let vesselCode = "";
let voyageNo = "";
const selectComapny = () => {
  let item = carriers.value.find((n) => n.carrierName == formParam.carrierName);
  if (item) {
    companyCode = item.companyCode;
  }
};

const selectVoyage = (form) => {
  let item = voyages.value.find((n) => n.voyagelId == form.voyageId);
  if (item) {
    voyageNo = item.voyageNo;
    pods = item.pods
    pols = item.pols
  }
};

onMounted(async () => {  
  let result = await service.get("/shipping/schedule/getAllSchedule");
  if (result) {
    vessels = result.data;
  }
 
  let params = { status: 0 };

  result = await service.get("/shipping/voyage/list", { params: params });
  if (result) {
    voyages.value = result.data;
  }
   refreshTable();
});

const selectVessel = async()=>{ 
  queryParams.voyageNo = null;
  queryParams.pol = null;
  queryParams.pod = null;
  voyages.value = []
  pods.value = []
  pols.value = []
  //@ts-ignore
  let item = vessels.find(n=>n.vesselName == queryParams.vesselName) 
  voyages.value = item.schedules
}
 
// 获取文件名称
function getFileName(name) {
    if (name == null) {
      return name;
    }
    // 如果是url那么取最后的名字 如果不是直接返回
    if (name.lastIndexOf("/") > -1) {
      return name.slice(name.lastIndexOf("/") + 1);
    } else {
      return name;
    }
  }
  function downloadPDF(url) {
    ElMessageBox.confirm("Confirm to Download the file？", "Download  Information", {
      type: "warning",
      confirmButtonText: "Confirm",
      cancelButtonText: "Cancel",
    }).then(async () => {
      const newUrl = convertUrl(url);
      const a = document.createElement('a');
      a.href =newUrl;
      a.download = getFileName(newUrl);
      a.click();

    });
  }
</script> 
<style lang="scss" scoped>
.diff-measure{
  color: red;
  font-style: italic;
  font-weight: 800;
  font-size: 14px
}
</style> 
